<template>
  <table>
    <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
      <td
        v-for="(cell, columnIndex) in row"
        :key="columnIndex"
        @mousedown="startDrag($event, rowIndex, columnIndex)"
        @mouseenter="handleMouseEnter($event.target, rowIndex, columnIndex)"
        @mouseleave="handleMouseLeave($event.target, rowIndex, columnIndex)"
      >
        {{ cell }}
      </td>
    </tr>
  </table>
</template>
<script>
export default {
  data() {
    return {
      startRow: null, // 记录拖拽起始的行数
      startColumn: null, // 记录拖拽起始的列数
      lastRow: null, // 记录鼠标经过的前一个单元格的行数
      lastColumn: null, // 记录鼠标经过的前一个单元格的列数
      tableData: [
        ['A1', 'B1', 'C1', 'D1', 'E1'],
        ['A2', 'B2', 'C2', 'D2', 'E2'],
        ['A3', 'B3', 'C3', 'D3', 'E3'],
        ['A4', 'B4', 'C4', 'D4', 'E4'],
        ['A5', 'B5', 'C5', 'D5', 'E5'],
      ],
    };
  },
  methods: {
    startDrag(event, rowIndex, columnIndex) {
      this.startRow = rowIndex;
      this.startColumn = columnIndex;
    },
    handleMouseEnter(td, rowIndex, columnIndex) {
      // 如果鼠标左键没有按下，退出事件处理函数
      if (event.buttons !== 1) return;

      // 防止重复高亮
      if (this.lastRow === rowIndex && this.lastColumn === columnIndex) {
        return;
      }

      // 先移除前一个单元格的高亮
      if (this.lastRow != null && this.lastColumn != null) {
        this.$refs.table.rows[this.lastRow].cells[
          this.lastColumn
        ].classList.remove('highlight');
      }

      // 高亮当前单元格
      td.classList.add('highlight');

      // 更新前一个单元格的位置
      this.lastRow = rowIndex;
      this.lastColumn = columnIndex;
    },
    handleMouseLeave(td, rowIndex, columnIndex) {
      // 移除当前单元格的高亮
      if (
        event.buttons === 1 ||
        (this.startRow === rowIndex && this.startColumn === columnIndex)
      ) {
        // 如果鼠标左键还按下或者鼠标离开起始单元格，则不移除当前单元格的高亮
        return;
      } else {
        td.classList.remove('highlight');
      }
    },
  },
};
</script>
